<template>
  <div class="app-container">
  <div class="left-bar">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="批量编号" prop="batchId">
          <el-input
            v-model="queryParams.batchId"
            placeholder="请输入批量编号"
            size="mini" clearable
            :style="{width: '100%'}"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini"  @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"  size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-plus"
              :disabled="single"
              @click="handleCost"
              size="mini"
            >添加</el-button>
          </el-col>
        </el-row>
    <el-table v-loading="loading" :data="leftData"  @selection-change="saveLeft" ref="leftData" >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="地址" align="center" prop="doorAddr" width="200"/>
         <el-table-column label="房屋编号" align="center" prop="houseId" />
         <el-table-column label="姓名" align="center" prop="userName" />
         <el-table-column  :formatter="numberFormat"  label="应缴金额" align="center" prop="budgetMoney" />
         <el-table-column  :formatter="numberFormat"  label="本金余额" align="center" prop="balance" />
       </el-table>

       <pagination
         v-show="total>0"
         :total="total"
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
     </div>

     <div class="right-bar">
     <div class="shan" stype="margin-top:500px;">
        <el-row :gutter="10" class="mb8" >
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  :disabled="multiple"
                  @click="remove"
                  size="mini"
                >删除</el-button>
              </el-col>
            </el-row>
            </div>
          <el-table v-loading="loading" :data="rightData" @selection-change="saveRight" ref="rightData">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="房屋编号" align="center" prop="houseId" />
              <el-table-column label="姓名" align="center" prop="userName" />
              <el-table-column  :formatter="numberFormat"  label="缴费金额" align="center" prop="costMoney" />
            </el-table>

     </div>


     </div>
   </template>

   <script>
   import { listDoor, insertCostDetail,listBatchDetail,deleteCostDetail} from "@/api/fund/costBatchDetail";

   export default {
     name: "CostBatchDetail",
     data() {
       return {
         // 遮罩层
         loading: true,
         // 选中数组
         ids: [],
         houseIds : [],
         // 非单个禁用
         single: true,
         // 非多个禁用
         multiple: true,
         // 显示搜索条件
         showSearch: true,
         // 总条数
         total: 0,
         // 户管理表格数据
         leftData: [],
         rightData: [],
         // 弹出层标题
         title: "",
         // 是否显示弹出层
         open: false,
         // 查询参数
         queryParams: {
           pageNum: 1,
           pageSize: 10,
           batchId: null
         },
         // 表单参数
         form: {},
         // 表单校验
         rules: {
           costDate: [
             { required: true, message: "缴费时间不能为空", trigger: "change" }
           ]
         }
       };
     },
       created() {
         this.getList();
       },
     methods: {
       numberFormat (row, column, cellValue) {
         cellValue += ''
         if (!cellValue.includes('.')) cellValue += '.'
         return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
           return $1 + ','
         }).replace(/\.$/, '')
       },
       /** 查询户管理列表 */
       getList() {
       this.loading = true;
       listDoor(this.queryParams).then(response => {
         this.leftData = response.rows;
         this.total = response.total;
         this.loading = false;
       });
       listBatchDetail(this.queryParams).then(response => {
          this.rightData = response.rows;
        });

       },
       // 取消按钮
       cancel() {
         this.open = false;
         this.reset();
       },
       // 表单重置
       reset() {
         this.form = {
           doorId: null,
           areaName: null,
           groupName: null,
           unitName: null,
           doorName: null,
           houseId: null,
           space: null,
           spaceSts: null,
           purposeId: null,
           userName: null,
           tel: null,
           papersCode: null,
           budgetMoney: null,
           costMoney: null,
           costDate: null,
           costSts: null,
           balance: null,
           rateType: null,
           rateMoney: null,
           rateDate: null,
           creater: null,
           createDate: null,
           remark: null
         };
         this.resetForm("form");
       },
       /** 搜索按钮操作 */
       handleQuery() {
         this.queryParams.pageNum = 1;
         this.getList();
       },
       /** 批量添加操作 */
       handleInsert() {
         this.getList();
       },


       /** 重置按钮操作 */
       resetQuery() {
         this.resetForm("queryForm");
         this.handleQuery();
       },
       /** 提交按钮 */
       submitForm() {
         this.$refs["form"].validate(valid => {
           if (valid) {
             insertCost(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           }
         });
       },
        saveLeft(rows) {
            this.ids = rows.map(item => item.houseId)
            this.single = !rows.length>=1
            this.multiple = !rows.length
             this.left = [];
             if (rows) {
               rows.forEach(row => {
                 if (row) {
                   this.left.push(row);
                 }
               });
             }
           },

            saveRight(rows) {
              this.ids = rows.map(item => item.houseId)
              this.single = rows.length!==1
              this.multiple = !rows.length
               this.right = [];
               if (rows) {
                 rows.forEach(row => {
                   if (row) {
                    this.right.push(row);
                   }
                 });
               }
             },
             // 右边表格选择项移到左边
                remove() {
                  this.houseIds = []
                  this.rightData.forEach(item=>{
                   this.houseIds.push(item.houseId)
                  })
                  deleteCostDetail(this.ids,this.rightData[0].batchId).then(response => {
                     this.getList();
                   });
               },

               handleCost(){
                 this.houseIds = []
                 this.leftData.forEach(item=>{
                  this.houseIds.push(item.houseId)
                 })
                 insertCostDetail(this.ids,this.leftData[0].batchId).then(response => {
                    this.getList();
                  });
               }

     }
   };
   </script>

<style lang='postcss'>
.left-bar {
  float: left;
  width: 60%;
  height: 100%;
  position: absolute;
  overflow: auto;
  box-shadow: 1px 1px #888888;

}
.right-bar {
  float: right;
  left: 63%;
  width: 35%;
  height: 100%;
  position: absolute;
  overflow: auto;
}

.shan .mb8{
  margin-top:58px;
}
</style>

